<template>
	<div class="tab-title-page my_index">
		<el-row style="padding: 10px;">
			<el-col :span="5">
				<div>逾期≥1天</div>
				<div style="margin-top: 20px;">{{overdueList[0].t1}}</div>
			</el-col>
			<el-col :span="5">
				<div>逾期≥7天</div>
				<div style="margin-top: 20px;">{{overdueList[1].t7}}</div>
			</el-col>
			<el-col :span="5">
				<div>逾期≥30天</div>
				<div style="margin-top: 20px;">{{overdueList[2].t30}}</div>
			</el-col>
			<el-col :span="5">
				<div>逾期≥60天</div>
				<div style="margin-top: 20px;">{{overdueList[3].t60}}</div>
			</el-col>
			<el-col :span="4">
				<div>逾期≥90天</div>
				<div style="margin-top: 20px;">{{overdueList[4].t90}}</div>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<el-row type="flex" class="row-bg">
			<el-col :span="6">
				<div class="grid-content bg-purple" style="height:310px;">
					<T1status :list="list"></T1status>
					<div style="width: 100%;margin: 0 auto;text-align: center;margin-top: 20px;">
						发货率100%
					</div>
				</div>
			</el-col>
			<el-divider class="left-divider" direction="vertical"></el-divider>
			<el-col :span="6">
				<div class="grid-content bg-purple-light" style="height:310px;">
					<T7status></T7status>
					<div style="width: 100%;margin: 0 auto;text-align: center;margin-top: 20px;">
						发货率100%
					</div>
				</div>
			</el-col>
			<el-divider class="left-divider" direction="vertical"></el-divider>
			<el-col :span="6">
				<div class="grid-content bg-purple" style="height:310px;">
					<T30status></T30status>
					<div style="width: 100%;margin: 0 auto;text-align: center;margin-top: 20px;">
						发货率100%
					</div>
				</div>
			</el-col>
			<el-divider class="left-divider" direction="vertical"></el-divider>
			<el-col :span="6">
				<div class="grid-content bg-purple" style="height:310px;">
					<allstatus></allstatus>
					<div style="width: 100%;margin: 0 auto;text-align: center;margin-top: 20px;">
						发货率100%
					</div>
				</div>
			</el-col>
		</el-row>
		<el-divider content-position="left"><h5>数据明细</h5></el-divider>
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple" style="height:400px;">
					<total :bad-list="badList"></total>
				</div>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple" style="height:400px;">
					<badBalance></badBalance>
				</div>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple" style="height:400px;">
					<payable></payable>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
  
<script>
import total from './components/total'
import T1status from './components/T1status'
import T7status from './components/T7status'
import T30status from './components/T30status'
import allstatus from './components/allstatus'
import badBalance from './components/badBalance'
import payable from './components/payable'
import { orderCountTone, overdueOrderCount, badOrderCount, badAmountOrderCount, amountOrderCount } from '@/api/countData'
export default {
	components: { total, T1status, T30status, T7status, allstatus, badBalance, payable },
	data() {
		return {
			orderCountTone:[],
			list:[],
			overdueList:[],
			badList:{},
			badAmountList:[],
			amountList:[]
		}
	},
	methods: {
		
		orderCountTone1(){
			// T_1-T_30订单统计
			orderCountTone().then(res=>{
				this.list=res
			})
			
		}
	},
	mounted() {
		this.orderCountTone1();
		overdueOrderCount().then(res=>{
			this.overdueList=res
		})
		badOrderCount().then(res=>{
			this.badList=res
		})
		badAmountOrderCount().then(res=>{
			this.badAmountList=res
		})
		amountOrderCount().then(res=>{
			this.amountList=res
		})
	}
}
</script>
  
<style lang="scss" scoped>
.tab-title-page {
	margin-top: 20px;
	background-color: #fff;
}

.left-divider {
	height: 300px;
}
</style>
  